<!-- 公告信息管理 -->
<template>
    <div>
        <el-card>
            <el-button type="primary" icon="Plus" @click="addNotice">新增公告</el-button>
            <div class="table">
                <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" max-height="460px">
                    <el-table-column label="序号" type="index" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="title" label="标题" width="270" show-overflow-tooltip />
                    <el-table-column prop="content" label="内容" width="270" show-overflow-tooltip />
                    <el-table-column prop="createdDt" label="创建时间" />
                    <el-table-column prop="createdBy" label="创建人" />
                    <el-table-column label="操作" width="120" align="center">
                        <template #default="scope">
                            <el-button size="small" type="primary" icon="Edit" @click="handleEdit(scope.row)"></el-button>
                            <el-popconfirm title="您确定删除这条公告吗?" @confirm="handleDelete(scope.row)" icon="Delete"
                                icon-color="red" width="220px">
                                <template #reference>
                                    <el-button size="small" type="danger" icon="Delete"></el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页器 -->
            <div class="pagination">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]" background layout="total, sizes, prev, pager, next, jumper"
                    :total="totals" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </el-card>
        <!-- 弹窗 -->
        <el-dialog v-model="dialogFormVisible" :title="noticeForm.id ? '修改公告' : '新增公告'" width="40%">
            <el-form :model="noticeForm" :rules="rules" ref="noticeForms" status-icon>
                <el-form-item prop="title" label="公告标题" :label-width="formLabelWidth">
                    <el-input v-model="noticeForm.title" autocomplete="off" placeholder="请输入公告标题" />
                </el-form-item>
                <el-form-item prop="content" label="公告内容" :label-width="formLabelWidth">
                    <el-input v-model="noticeForm.content" :rows="8" type="textarea" placeholder="请输入公告内容" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { onMounted, ref, reactive, nextTick } from 'vue';
import useUserStore from '../../store/modules/user';
import { reqGetNoticeInfo, reqOperateNoticeInfo, reqDeleteNoticeInfo } from '../../api/info/notice/index'
import type { Notice, AllNotice, noticeFormData } from '../../api/info/notice/type'
// 表格数据
let tableData = ref<AllNotice>([])
// 当前页码
let currentPage = ref<number>(1)
// 当前页有多少条数据
let pageSize = ref<number>(10)
// 数据总数
let totals = ref<number>(0)
let userStore = useUserStore()
let noticeForm = reactive<Notice>({
    title: '',
    content: '',
    createdBy: userStore.username
})
let noticeForms = ref()

let dialogFormVisible = ref<Boolean>(false)
let formLabelWidth = ref<String>('80px')

// 表单校验
const rules = {
    title: [{ required: true, message: '公告标题不能为空', trigger: 'blur' }],
    content: [{ required: true, message: '公告内容不能为空', trigger: 'blur' }]
}

onMounted(() => {
    getNoticeInfo()
})
// 获取全部公告信息
const getNoticeInfo = async () => {
    let data: noticeFormData = {
        pageSize: pageSize.value,
        currentPage: currentPage.value

    }
    let result: any = await reqGetNoticeInfo(data)
    if (result.code == 20000) {
        tableData.value = result.data.list
        currentPage.value = result.data.currentPage
        pageSize.value = result.data.pageSize
        totals.value = result.data.totals

    }
}

// 新增公告按钮
const addNotice = () => {
    // 显示对话框
    dialogFormVisible.value = true
    // 清空输入框
    noticeForm.content = ''
    noticeForm.title = ''
    noticeForm.id = ''
    //清除校验结果
    nextTick(() => {
        noticeForms.value?.clearValidate('title')
        noticeForms.value?.clearValidate('content')
    })
}

// 编辑表格中的数据
const handleEdit = (row: Notice) => {
    dialogFormVisible.value = true
    // 合并对象
    Object.assign(noticeForm, row)

}
// 气泡确认框 确认按钮回调 删除
const handleDelete = async (row: Notice) => {
    let result: any = await reqDeleteNoticeInfo(row)
    if (result.code == 20000) {
        // 重新获取公告信息
        getNoticeInfo()
        ElMessage({
            type: 'success',
            message: '公告删除成功'
        })
    } else {
        ElMessage({
            type: 'error',
            message: '公告删除失败'
        })
    }

}

// 改变当前页 数据总数
const handleSizeChange = (pagesize: number) => {
    pageSize.value = pagesize
    getNoticeInfo()
}
// 当前页改变时的回调
const handleCurrentChange = (currentpage: number) => {
    currentPage.value = currentpage
    getNoticeInfo()

}
// 确定按钮回调
const submit = async () => {
    await noticeForms.value.validate();
    // 表单校验通过
    let result: any = await reqOperateNoticeInfo(noticeForm)
    if (result.code == 20000) {
        // 关闭对话框
        dialogFormVisible.value = false
        ElMessage({
            type: 'success',
            message: noticeForm.id ? '公告修改成功' : '公告新增成功'
        })
        // 再次发请求获取最新的数据
        getNoticeInfo()
    } else {
        ElMessage({
            type: 'error',
            message: noticeForm.id ? '公告修改失败' : '公告新增失败'
        })
        dialogFormVisible.value = false
    }
}
</script>

<style lang="scss" scoped>
.el-form {
    padding: 20px 30px;
}

.table {
    margin: 10px 0;

    .el-table {
        font-size: 13px !important;
    }
}

.pagination {
    margin-top: 20px;
}
</style>